<template>
  <div class="bg">
    <nav-com :title="title" :showView="true" @back="backHandler()"></nav-com>
    <van-tabs @click="switchActive" color="#FF6B35" title-active-color="#FF6B35" title-inactive-color="#000000"
      v-model="active">
      <van-tab v-for="index in tabList">
        <template #title>
          <van-icon v-if="index == '筛选'" name="filter-o" />{{ index }}
        </template>
        <div v-if="active == 0" style="
            margin-top: 15px;
            background: #fff;
            height: 100vh;
            padding: 15px;
          ">
          <div style="
              display: flex;
              flex-wrap: wrap;
              border-bottom: 1px solid #e7e7e7;
              padding-bottom: 10px;
            ">
            <div style="
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              姓名
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              手机号
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              级别
            </div>
            <div style="
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              邀请人手机号
            </div>
          </div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getUserList">
            <div v-for="user in userList">
              <div  style="
                    justify-content: space-between;
                    font-size: 13px;
                    display: flex;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #e7e7e7;
                    padding-top: 10px;
                    padding-bottom: 10px;
                ">
                <div style="
                    width: 30vw;
                    color: #666666;
                    font-weight: 500;
                    line-height: 35px;
                  ">
                  {{ user.user.nickname }}
                </div>
                <div style="
                    text-align: center;
                    width: 30vw;
                    color: #666666;
                    font-weight: 500;
                    line-height: 35px;
                  ">
                  {{ user.mobile  | mobileFilter }}
                </div>
                <div style="
                    text-align: center;
                    width: 30vw;
                    color: #666666;
                    font-weight: 500;
                    line-height: 35px;
                  ">
                  {{ user.role | roleType }}
                </div>
                <div style="
                    width: 30vw;
                    color: #666666;
                    font-weight: 500;
                    line-height: 35px;
                  ">
                  {{ user.inviter_mobile  | mobileFilter }}
                </div>
                <div style="display: flex">
                  <div @click="disable(user.user_id)" v-if="user.user.status == 'normal'" class="operBtn"
                    style="ackground: #ff6b35; color: white;">
                    <!-- <div @click="disable(user.user_id)" v-if="operType==1&&user.user.status == 'normal'" class="operBtn"
                    style="ackground: #ff6b35; color: white;"> -->
                    冻结账号
                  </div>
                  <div v-if="user.user.status == 'forbidden'" class="operBtn" style="background: #efefef;color: #b8b8b8;">
                    停用账号
                  </div>
                  <div @click="toDetail(user.user_id)" class="operBtn" style="background: #ff6b35;">
                    查看详情
                  </div>
                </div>
              </div>
            </div>
          
          </van-list>
        </div>
        <div v-if="active == 1" style="
            margin-top: 15px;
            background: #fff;
            height: 100vh;
            padding: 15px;
          ">
          <div style="
              display: flex;
              flex-wrap: wrap;
              border-bottom: 1px solid #e7e7e7;
              padding-bottom: 10px;
            ">
            <div style="
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              订单ID
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              用户手机号
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              级别
            </div>
            <div style="
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              订单号
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              添加时间
            </div>
            <div style="
                text-align: center;
                width: 30vw;
                color: #222222;
                font-weight: 500;
                line-height: 30px;
              ">
              奖励类型
            </div>
          </div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getLingAdvListt">
         
            <div v-for="lingAd in  lingAdList">
              <div  style="
                    justify-content: space-between;
                    font-size: 13px;
                    display: flex;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #e7e7e7;
                    padding-top: 10px;
                    padding-bottom: 10px;
                  ">
                <div class="advCsItem" style="text-align: left;">
                  {{ lingAd.order_id }}
                </div>
                <div class="advCsItem">
                  {{ lingAd.mobile | mobileFilter }}
                </div>
                <div class="advCsItem">
                  {{ lingAd.role | roleType }}
                </div>
                <div class="advCsItem" style="text-align: left;text-overflow: ellipsis; overflow: hidden;">
                  {{ lingAd.order_sn }}
                </div>
                <div class="advCsItem">
                  {{ lingAd.addtime | dateFormat }}
                </div>
                <div class="advCsItem">
                  {{ lingAd.type | typeName }}
                </div>
              </div>
            </div>

          </van-list>
        </div>
        <div v-if="active == 2" style="
            margin-top: 15px;
            background: #fff;
            height: 100vh;
            padding: 15px;
          ">
          <div style="display: flex; flex-wrap: wrap;  border-bottom: 1px solid #e7e7e7; padding-bottom: 10px;">
            <div class="advCsItem" style="text-align: left;;color: #222222;  font-weight: 500;">
              订单ID
            </div>
            <div class="advCsItem" style="font-weight: 500;color: #222222;">
              分割标识
            </div>
            <div class="advCsItem" style="font-weight: 500;;color: #222222;">
              奖励类型
            </div>
            <div class="advCsItem" style="text-align: left;;color: #222222;">
              金额
            </div>
            <div class="advCsItem" style=" font-weight: 500;;color: #222222;">
              添加时间
            </div>
          </div>
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getAdvCsList">
            <div v-for="advCs in advCsList">
              <div class="advCsList">
                <div class="advCsItem" style="text-align: left;">
                  {{ advCs.order_id }}
                </div>
                <div class="advCsItem">
                  {{ advCs.user_flags }}
                </div>
                <div class="advCsItem">
                  {{ advCs.type | typeName2 }}
                </div>
                <div class="advCsItem" style="text-align: left;">
                  {{ advCs.money }}
                </div>
                <div class="advCsItem">
                  {{ advCs.addtime_text }}
                </div>
                <div class="advCsItem"></div>
              </div>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <div class="filter" @click="showFilter = true">
      <van-icon name="filter-o" />筛选
    </div>
    <!-- 筛选项 -->
    <van-popup round v-model="showFilter" position="right" :style="{ height: '100%', width: '80%' }">
      <div style="padding: 10px">
        <div v-if="active == 0">
          <van-cell-group>
            <van-field v-model="userForm.nickname" label="姓名" placeholder="请输入姓名" />
          </van-cell-group>
          <van-cell-group>
            <van-field type="tel" v-model="userForm.mobile" label="用户手机号" placeholder="请输入手机号" />
          </van-cell-group>
          <van-cell-group>
            <van-field readonly v-model="roleName" label="级别" placeholder="请选择您的级别"
              @click-right-icon="roleTypeShow = true" right-icon="arrow-down" />
          </van-cell-group>
          <van-cell-group>
            <van-field type="tel" v-model="userForm.inviter_mobile" label="邀请人手机号" placeholder="请输入邀请人手机号" />
          </van-cell-group>
          <van-cell-group>
            <van-field type="tel" v-model="userForm.parent_mobile" label="直接负责人手机号" placeholder="请输入直接负责人手机号" />
          </van-cell-group>
          <van-cell-group>
            <van-field type="tel"  v-model="userForm.role_url" label="团队筛选" placeholder="请输入团队筛选" />
          </van-cell-group>
          <div style="display: flex; line-height: 40px; align-items: center">
            <div style="
                font-size: 13px;
                margin-left: 15px;
                min-width: 100px;
                color: #222222;
              ">
              联创伙伴
            </div>
            <div>
              <van-radio-group v-model="userForm.is_union" direction="horizontal">
                <van-radio checked-color="#FB7647" name="1">是</van-radio>
                <van-radio checked-color="#FB7647" name="0">否</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div style="display: flex; line-height: 40px; align-items: center">
            <div style="  font-size: 13px; margin-left: 15px;   min-width: 100px; ">
              独立负责人
            </div>
            <div>
              <van-radio-group v-model="userForm.is_sep_income" direction="horizontal">
                <van-radio checked-color="#FB7647" name="1">是</van-radio>
                <van-radio checked-color="#FB7647" name="0">否</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div v-if="active == 1">
          <van-cell-group>
            <van-field type="digit" v-model="lingAdvForm.order_id" label="订单ID" placeholder="请输入订单ID" />
          </van-cell-group>
          <van-cell-group>
            <van-field type="tel" v-model="lingAdvForm.mobile" label="用户手机号" placeholder="请输入手机号" />
          </van-cell-group>
          <van-cell-group>
            <van-field readonly v-model="roleName" label="级别" placeholder="请选择您的级别"
              @click-right-icon="roleTypeShow = true" right-icon="arrow-down" />
          </van-cell-group>
          <van-cell-group>
            <van-field readonly v-model="rewardTypeName2" label="奖励级别" placeholder="请选择奖励级别"
              @click-right-icon="rewardTypeShow2 = true" right-icon="arrow-down" />
          </van-cell-group>
        </div>
        <div v-if="active == 2">
          <van-cell-group>
            <van-field type="digit" v-model="advCsForm.order_id" label="订单ID" placeholder="请输入订单ID" />
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="advCsForm.user_flags" label="分割标识" placeholder="请选择分割标识" />
          </van-cell-group>
          <van-cell-group>
            <van-field readonly v-model="rewardTypeName" label="奖励级别" placeholder="请选择奖励级别"
              @click-right-icon="rewardTypeShow = true" right-icon="arrow-down" />
          </van-cell-group>
        </div>
        <div class="bottomBtn">
          <div class="djBt" @click="resetEvent()">重置</div>
          <div class="czBt" @click="switchActive(active)">提交</div>
        </div>
      </div>
    </van-popup>
    <!-- 筛选项 -->
    <!-- 选择器 -->
    <van-popup v-model="jlTypePicker" @cancel="jlTypePicker = false" position="bottom">
      <van-picker v-if="jlTypePicker" show-toolbar title="请选择奖励类型" :columns="columns" @confirm="onConfirm"
        @cancel="jlTypePicker = false" />
    </van-popup>
    <van-popup v-model="roleTypeShow" position="bottom">
      <van-picker show-toolbar :columns="roleType" @confirm="roleTypeConfirm" @cancel="roleTypeShow = false">
      </van-picker>
    </van-popup>
    <van-popup v-model="rewardTypeShow" position="bottom">
      <van-picker show-toolbar :columns="rewardType" @confirm="rewardTypeConfirm" @cancel="rewardTypeShow = false">
      </van-picker>
    </van-popup>
    <van-popup v-model="rewardTypeShow2" position="bottom">
      <van-picker show-toolbar :columns="rewardType2" @confirm="rewardTypeConfirm2" @cancel="rewardTypeShow2 = false">
      </van-picker>
    </van-popup>
    <!-- 选择器 -->
  </div>
</template>
    
<script>
import moment from "moment";
import navCom from "@/component/nav";
import {
  RadioGroup,
  Radio,
  Field,
  CellGroup,
  Picker,
  Icon,
  Toast,
  Pagination,
  Calendar,
} from "vant";

import { helpTogetherDeatil } from "@/api/api";
import { getFttusers, getUserList, userDetail, resetPwd3, disable, userdel, lingAdvList, advCsList } from "@/api/api";

export default {
  components: {
    navCom,
  },
  filters: {
    mobileFilter(val) {
      if (val == "" || val == undefined) {
        return "无";
      }
      let tell = /(\d{3})\d*(\d{4})/;
      let num = val.replace(tell, "$1****$2");

      return num;
    },
    dateFormat(val) {
      return moment(val * 1000).format("YYYY-MM-DD HH:mm:ss");
    },

    typeName(val) {
      var rewardType =  ['零售收益', '批发收益', '日广告收益', '周广告收益'];
      return rewardType[(val - 1)]
    },
    typeName2(val) {
      var rewardType =  ['推广员日创收', '代言人日创收', '一星网店主日创收', '二星网店主日创收', '一星网店主周创收'];
      return rewardType[(val - 1)]
    },
    roleType(val) {
      if(val==0){
        return "无"
      }
      var roleType = ['推广员', '代言人', '一星网店经销商', '二星网店经销商', '银牌经销商', '金牌经销商', '钻石经销商']
      return roleType[(val - 1)]
    },
  },
  data() {
    return {
      
      title:"",
      operType:0,
      loading: false,
      finished: false,
      showFilter: false,
      dataInfo: {},
      tabList: [],
      tabList2: ["会员信息"],
      active: 0,
      dataList: [],

      //选择类型
      jlTypePicker: false,
      showPayType: false,
      value: "",
      payType: ["余额支付", "微信支付", "支付宝支付", "提货券兑换", "其他"],
      columns: ["杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州"],

      //会员信息数据
      rewardTypeName: "",
      rewardTypeName2: "",
      roleName: "",
      userList: [],
      lingAdList: [],
      advCsList: [],
      roleTypeShow: false,
      roleType: ['推广员', '代言人', '一星网店经销商', '二星网店经销商', '银牌经销商', '金牌经销商', '钻石经销商'],
      rewardTypeShow: false,
      rewardTypeShow2: false,
      rewardType: ['推广员日创收', '代言人日创收', '一星网店主日创收', '二星网店主日创收', '一星网店主周创收'],
      rewardType2: ['零售收益', '批发收益', '日广告收益', '周广告收益'],
      userForm: {
        offset: 1,
        limit: 10,
        nickname: "",
        mobile: "",
        role: "",
        inviter_mobile: "",
        parent_mobile: "",
        is_sep_income: "",
        is_union: "",
        role_url:"",
        type:1,
      },
      lingAdvForm: {
        offset: 1,
        limit: 10,
        mobile: "",
        role: "",
        type: "",
        order_id: ""
      },
      advCsForm: {
        offset: 1,
        limit: 10,
        username: "",
        mobile: "",
        order_id: "",
        user_flags: ""
      },
    };
  },
  created() {
    this.initData();
    this.operType=this.$route.params.operType;
    if(this.operType==1){
      this.userForm.type=1;
      // this.lingAdvForm.type=1;
      // this.advCsForm.type=1;
      
      this.title="项目负责人"
      // this.tabList=["会员信息", "零批/广告收益", "广告创收"]
      this.tabList=["会员信息"]
    }else{
      this.userForm.type=2;
      // this.lingAdvForm.type=2;
      // this.advCsForm.type=2;
      this.title="独立负责人"
      this.tabList=["会员信息"]
    }
  },
  methods: {
    switchActive(active) {
      if (active == 0) {
        this.userForm.offset = 1
        this.userList = []
        this.getUserList();
        this.filtersSearch=true;
        this.loading = false;
        this.finished = false;
      }
      if (active == 1) {
        if(this.operType==0){
            Toast("暂无权限")
            this.active=0;
            return;
        }
        this.lingAdvForm.offset = 1
        this.lingAdList = []
        this.getLingAdvListt();
        this.filtersSearch=true;
        this.loading = false;
        this.finished = false;
      }
      if (active == 2) {
        if(this.operType==0){
            Toast("暂无权限")
            this.active=0;
            return;
        }
        this.advCsForm.offset = 1
        this.advCsList = []
        this.getAdvCsList();
        this.filtersSearch=true;
        this.loading = false;
        this.finished = false;
      }
    },
    //筛选确定事件
    SubmitEvent() {
      console.log(this.active);
      if (this.active == 0) {
        this.getUserList();
      }
      if (this.active == 1) {
        this.lingAdvForm.offset = 1
        this.getLingAdvListt();
      }
      if (this.active == 2) {
        this.advCsForm.offset = 1
        this.getAdvCsList();
      }
    },
    resetEvent() {
      this.rewardTypeName = "";
      this.roleName = "";
      if (this.active == 0) {
        this.userForm = { offset: 1, limit: 10, nickname: "", mobile: "", role: "", inviter_mobile: "", parent_mobile: "", is_sep_income: "", is_union: "",role_url:"" }
        this.showFilter = false;
       console.log(this.loading)
        if(this.showFilter||!this.loading){
          this.userForm.offset = 1
          this.userList = []
          this.getUserList();
        }
      }
      if (this.active == 1) {
        this.lingAdvForm = {
          offset: 1,
          limit: 10,
          mobile: "",
          role: "",
          type: "",
          order_id: ""
        };
        this.showFilter = false;
        this.lingAdvForm.offset = 1
        this.lingAdList = []
        this.getLingAdvListt();
      }
      if (this.active == 2) {
        this.advCsForm = {
          offset: 1,
          limit: 10,
          username: "",
          mobile: "",
          order_id: "",
          user_flags: ""
        }
        this.showFilter = false;
        this.advCsForm.offset = 1
        this.advCsList = []
        this.getAdvCsList();
      }
    },

    //选择级别
    roleTypeConfirm(event) {
      console.log("roleTypeConfirm", event);
      console.log("roleTypeConfirm", this.roleType.indexOf(event));
      this.roleName = event;
      this.userForm.role = this.roleType.indexOf(event) + 1;
      this.lingAdvForm.role = this.roleType.indexOf(event) + 1;
      this.roleTypeShow = false;
    },
    //奖励类型
    rewardTypeConfirm(event) {
      console.log("rewardTypeConfirm", event);
      console.log("rewardTypeConfirm", this.rewardType.indexOf(event));
      this.rewardTypeName = event;
      this.advCsForm.type = this.rewardType.indexOf(event) + 1;
      this.rewardTypeShow = false;
    },
 //奖励类型
  rewardTypeConfirm2(event) {
      console.log("rewardTypeConfirm2", event);
      console.log("rewardTypeConfirm2", this.rewardType2.indexOf(event));
      this.rewardTypeName2 = event;
      this.lingAdvForm.type = this.rewardType2.indexOf(event) + 1;
      this.rewardTypeShow2 = false;
    },


    showPayTypeClick() {
      this.showPayType = true;
    },
    onPayTypeConfirm(value) { },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    //返回
    backHandler() {
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    toDetail(userId) {
      this.$router.push({ name: 'ipDetail', params: { userId: userId,operType:this.operType } })
    },
    initData() {
      // this.getUserList();
    },
    disable(userId) {
      this.$dialog
        .alert({
          title: "冻结账号",
          message:
            "确认要冻结该账号吗？",
          showCancelButton: true,
          confirmButtonText: "确认冻结",
        })
        .then(() => {
          disable({
            user_id: userId,
          }).then((res) => {
            Toast(res.data.msg);
            this.userForm.offset = 1;
            this.userList = [];
            this.getUserList();
          });
        });
    },

    //获取会员信息数据
    getUserList() {
      if(this.filtersSearch){
          return;
      }
      getUserList(this.userForm)
        .then((result) => {
          this.loading = false;
          console.log("获取会员信息数据", result)
          this.showFilter = false;
          this.filtersSearch = false;
          if (result.data.code == 1) {
            this.userList = this.userList.concat(result.data.data);
            console.log("获取会员信息数据", this.userList)
            if (result.data.data.length < 10) {
              this.finished = true;
            } else {
              this.userForm.offset = this.userForm.offset + 1;
            }
          }else{
            Toast(result.data.msg);
            this.finished = true;
          }
        })
        .catch((err) => { });
    },//获取会员信息数据

    //获取广告收益
    getLingAdvListt() {
      if(this.filtersSearch){
          return;
      }
      lingAdvList(this.lingAdvForm)
        .then((result) => {
          this.loading = false;
          console.log("获取广告收益", result)
          this.showFilter = false;
          this.filtersSearch = false;
          if (result.data.code == 1) {
            this.lingAdList = this.lingAdList.concat(result.data.data);
            if (result.data.data.length < 10) {
              this.finished = true;
            } else {
              this.lingAdvForm.offset = this.lingAdvForm.offset + 1;
            }
          }else{
            Toast(result.data.msg);
            this.finished = true;
          }
        })
        .catch((err) => { });
    },//获取广告收益

    //获取广告创收 
    getAdvCsList() {
      if(this.filtersSearch){
          return;
      }
      advCsList(this.advCsForm)
        .then((result) => {
          this.loading = false;
          console.log("获取广告创收", result)
          this.showFilter = false;
          this.filtersSearch = false;
          if (result.data.code == 1) {
            this.advCsList = this.advCsList.concat(result.data.data);
            if (result.data.data.length < 10) {
              this.finished = true;
            } else {
              this.advCsForm.offset = this.advCsForm.offset + 1;
            }
          }else{
            Toast(result.data.msg);
            this.finished = true;
          }
        })
        .catch((err) => { });
    },//获取广告创收

    onClick(name, title) {
      this.active = name;
      this.initData();
    },
  },
};
</script>
    
<style scoped>
/deep/ .van-tabs__nav--line {
  font-weight: 600;
  width: 85%;
}

/deep/ .van-tab--active {
  font-weight: 600;
}

/deep/ .van-tab__text--ellipsis {
  white-space: nowrap;
}

.bg {
  background: #f8f8f8;
  height: 100vh;
}

.goods-list {
  margin: 3.3vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.goods-list .good-box {
  margin-bottom: 4vw;
  min-height: 270px;
  width: 45vw;
  background: #fff;
}

.money-show {
  padding: 50px 0 10px 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  height: 12vh;
  background-size: 100% 100%;
}

.money-show .money {
  font-size: 30px;
}

.money-show .help-text {}

.money-show .button {
  height: 20px;
  border-radius: 10px;
  width: 50px;
  background: rgba(255, 255, 255, 0.4);
  color: #f84c5a;
  text-align: center;
  margin: 10px auto;
}

.data-detail {
  min-height: 74vh;
  padding-bottom: 10px;
}

.dataList {
  background: #fff;
  margin: 10px 20px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border-radius: 8px;
}

.dataList .title {
  font-size: 20px;
}

.dataList .time {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
}

.dataList .num {
  color: #fe4b20;
  font-size: 22px;
}

.filter {
  position: absolute;
  right: 0px;
  top: 50px;
  background: white;
  width: 70px;
  text-align: center;
  line-height: 44px;
}

/deep/ .van-cell {
  flex-direction: column !important;
}

/deep/ .van-hairline-unset--top-bottom::after {
  border: transparent !important;
  border-width: 0 !important;
}

/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}

/deep/ .van-cell__title {
  color: #222222;
  font-size: 13px;
  line-height: 30px;
  white-space: nowrap;
}

/deep/ .van-field__control {
  text-align: center;
}

/deep/ .van-field__body {
  background-color: #f9f9f9;
  text-align: center;
  border-radius: 50px;
  font-size: 12px;
  line-height: 30px;
}

/deep/ .van-radio__label {
  margin-left: 8px;
  color: #000000;
  line-height: 20px;
  font-size: 12px;
}

/deep/ .van-radio__icon {
  font-size: 12px;
}

/deep/ .van-field__right-icon {
  padding-right: 20px;
}

.bottomBtn {
  position: fixed;
  width: 90%;
  bottom: 0px;
  font-size: 13px;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  box-shadow: 0px -2px 9px 0px rgba(236, 236, 236, 0.5);
}

.djBt {
  padding: 10px 40px;
  border: 1px solid #666666;
  border-radius: 50px;
  color: #434343;
}

.czBt {
  padding: 10px 40px;
  border-radius: 50px;
  color: #fff;
  background: #fb7647;
}

.advCsList {
  justify-content: space-between;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #e7e7e7;
  padding-top: 10px;
  padding-bottom: 10px;
}

.advCsItem {
  text-align: center;
  width: 30vw;
  color: #666666;
  font-weight: 500;
  line-height: 35px;
  white-space: nowrap;
}

.operBtn {
  line-height: 30px;
  background: #ff6b35;
  color: white;
  font-size: 13px;
  border-radius: 2px;
  margin: 5px 5px;
  padding: 0 8px;
  margin-right: 10px;
}
</style>